import React, { useState, useEffect , memo} from 'react'
import { Modal } from 'antd-mobile'
import { ServiceModalStyle } from './style'
import { getServiceInfo } from '@api/home'

const DeliveryInfo = memo( (props) => {

  const [cartNumSwitch, setcartNumSwitch] = useState(false)
  const [freightSwitch, setfreightSwitch] = useState(false)
  const [serviceSwitch, setserviceSwitch] = useState(false)
  const [serviceList, setServiceList] = useState(false)

  const { address, cartTable, freightTable, goodsServices, gid } = props

  useEffect(() => {
    props.refreshHeight()
    if (serviceList === false) {
      getServiceInfo({  gid: gid }).then(
        res => {
          setServiceList(res.data)
        }
      )
    }
  }, [cartNumSwitch, freightSwitch])

  return (
    <div className="delivery-info common-card ">
      <ul className="flex-column">
        <li className="flex-row">
          <span> 发货地   </span>
          <span> {address}</span>
        </li>

        <li className="flex-row" onClick={e => { handelSwitch('cartnum') }} >
          <span> 车辆装载数量  </span>
          <span className="cart-num-switch"
            style={cartNumSwitch ? { transform: 'rotate(135deg)' } : { transform: 'rotate(45deg)' }}
          >  </span>
        </li>


        {cartNumSwitch &&
          <div className="cartNum">
            <table className="my-table">
              <thead className="">
                <tr >
                  {cartTable[0].car !== "" && <td>车辆属性</td>}
                  {cartTable[0].size !== "" && <td >车型</td>}
                  {cartTable[0].packaging_attributes !== "" && <td >包装类型</td>}
                  {cartTable[0].carnum !== "" && <td >装载量</td>}
                </tr>
              </thead>
              <tbody>

                {
                  cartTable &&
                  cartTable.map((item, key) => {
                    return (
                      item.carnum !== "" && <tr key={key + item.LAY_TABLE_INDEX}>
                        { (key === 0 || key % 3 === 0) && <td rowSpan="3"> {item.car} </td>}
                        { item.size !== "" && <td> {item.size} </td>}
                        { item.packaging_attributes !== "" && <td> {item.packaging_attributes} </td>}
                        {item.carnum !== "" && <td> {item.carnum} </td>}
                      </tr>
                    )
                  })
                }
              </tbody>
            </table>
          </div>}

        <li className="flex-row" onClick={e => { handelSwitch('freight') }} >
          <span> 预估运费  </span>
          <span className="cart-num-switch"
            style={freightSwitch ? { transform: 'rotate(135deg)' } : { transform: 'rotate(45deg)' }}

          >  </span>
        </li>

        {
          freightSwitch &&
          <div className="cartNum">
            <table className="my-table">
              <thead className="">
                <tr >
                  {freightTable[0].car_type !== "" && <td>车辆属性</td>}
                  {freightTable[0].car_size !== "" && <td >车型</td>}
                  {freightTable[0].fee !== "" && <td >运费</td>}
                </tr>
              </thead>
              <tbody>

                {
                  freightTable.map((item, key) => {
                    return (
                      item.fee !== "" &&
                      <tr key={key + item.fee}>
                        { (key === 0 || key % 3 === 0) && <td rowSpan="3"> {item.car_type} </td>}
                        {  item.car_size !== "" && <td> {item.car_size} </td>}
                        { item.fee !== "" && <td> {item.fee} </td>}
                      </tr>
                    )
                  })
                }
              </tbody>
            </table>
          </div>}



        <li className="flex-row" onClick={e => { handelSwitch('service') }}>
          <span> 服务 </span>
          <span className="service single-text-hidden">
            {
              goodsServices &&
              goodsServices.map((item, key) => {
                return <b key={item + key}>{item}</b>
              })
            }

          </span>
          <span className="service-switch"

            style={serviceSwitch ? { transform: 'rotate(135deg)' } : { transform: 'rotate(45deg)' }}
          >
          </span>

        </li>
      </ul>
      <Modal
        visible={serviceSwitch}
        onClose={e => { handelSwitch('service') }}
        maskClosable={true}
        transparent
        popup={true}
        animationType='slide-up'
        className="service-modal"
        style={{
          backgroundColor: 'white',
          borderRadius: '.25rem .25rem 0 0'
        }}
      >
        <ServiceModalStyle>
          <div className="top flex-row">
            <p>服务说明</p>
            <div className="close" onClick={e => { handelSwitch('service') }}>
              <img src="https://res.lexiangpingou.cn/images/vip/chacha.png" alt="" />
            </div>
          </div>

          <hr />

          <div className="content">


            {
              serviceList &&
              serviceList.map((item, key) => {
                return (
                  <div className="item flex-row" key={key + item.name}>
                    <div className="left">
                      <img src="https://res.lexiangpingou.cn/images/vip/selectgreen.png" alt="" />
                    </div>
                    <div className="right flex-column">
                      <div className="top">
                        {item.name}
                      </div>
                      <div className="bottom">
                        {item.content}
                      </div>
                    </div>
                  </div>
                )
              })
            }


          </div>

        </ServiceModalStyle>
      </Modal>

    </div >
  )

  function handelSwitch(type) {
    switch (type) {
      case 'freight':
        setfreightSwitch(!freightSwitch)
        break;
      case 'cartnum':
        setcartNumSwitch(!cartNumSwitch)
        break;
      case 'service':
        setserviceSwitch(!serviceSwitch)
        break;

      default:
        break;
    }
  }
})

export default DeliveryInfo